<template>
  <div class="temp_root" ref="temp_root">
    <!-- 选择上传文件bridge -->
    <input type="file" :id="choseimgfile" class="hide" @change="getThisFile" ref="" accept="image/*">
    <!-- 选择上传文件bridge -->
    <!-- banner start -->
    <div class="slider-wrapper" id="slider-wrapper" ref="sliderWrapper">
      <div class="slider-content">
        <div class="slider" ref="slider" v-if="TEMP_ROOT_DATA">
          <div class="slider-group" ref="sliderGroup">

            <changeImgTips @change-img="changeImg(TEMP_ROOT_DATA.tempCon.banner[0],'picUrl')"
                           @remove-img="removeImg(TEMP_ROOT_DATA.tempCon.banner[0],'picUrl')"
                           v-if="editable"
                           :choseimgfile="choseimgfile"
            >
            </changeImgTips>
            <!--<a :href="TEMP_ROOT_DATA.tempCon.banner[0].linkUrl">-->
            <img
              :src="TEMP_ROOT_DATA.tempCon.banner[0].picUrl || 'http://style.iambuyer.com/img/rhx-mobile-normal@2x.png'"
              class="bannerImg" alt="">
            <!--</a>-->

          </div>
        </div>
      </div>
    </div>
    <!-- banner end -->
    <!-- nav start -->
    <div class="navTopGroup" ref="navTopGroup" id="navTopGroup">
      <ul class="navTopWrapper" :class="GET_EDITABLE ? 'manageNavStyle' : 'b'" :style="modulesListWidth"
          v-if="TEMP_ROOT_DATA.tempCon">
        <transition-group name="list-complete" tag="div" mode='in-out'>
          <li
            v-for='(item,index) in TEMP_ROOT_DATA.tempCon.modules'
            :key='index'
            :style="modulesListItemWidth">
            <a
              class="tab-link"
              @click="goID(item.icon.moduleName)"
              :class="isSelIconStyle === item.icon.moduleName ? 'isSelIconStyle' : ''"
            >
              <div class="tab-icon">
                <div class="nav-del-btn" @click="delThisModule(item,index)" v-if="editable">
                  <i class="iconfont">&#xe657;</i>
                  <!--<i>-</i>-->
                </div>
                <!--<img :src="item.defaultIcon" class="selIcon shake">-->
                <!--<a href="">{{item.module_icon}}</a>-->
                <i v-html="item.icon.iconImg" class="iconfont"
                   @click="clickModuleIcon($event.target.innerHTML,index)
            ">
                </i>
              </div>
              <!--<span class="tab-link nowrap"-->
              <!--:contenteditable="editable"-->
              <!--@click="selectText($event)">{{item.icon.iconName}}</span>-->
              <textarea name="" id="" v-model="item.icon.iconName" class="tab-link nowrap" :style="editTextOutLine"
                        maxlength="5"
                        placeholder="请输入"
                        :disabled="!editable || item.icon.noEdit"></textarea>
            </a>
          </li>
        </transition-group>
      </ul>
    </div>
    <!--<div class="navTopGroup" ref="navTopGroup" id="navTopGroup">-->
    <!--<ul class="navTopWrapper" :class="GET_EDITABLE ? 'manageNavStyle' : 'b'" :style="modulesListWidth"-->
    <!--v-if="TEMP_ROOT_DATA.tempCon">-->
    <!--<transition-group name="list-complete" tag="div" mode='in-out'>-->
    <!--<li-->
    <!--v-for='(item,index) in TEMP_ROOT_DATA.tempCon.modulesSort'-->
    <!--:key='index'-->
    <!--:style="modulesListItemWidth">-->
    <!--<a-->
    <!--class="tab-link"-->
    <!--@click="goID(TEMP_ROOT_DATA.tempCon.modules[item].icon.moduleName)"-->
    <!--&gt;-->
    <!--<div class="tab-icon">-->
    <!--<div class="nav-del-btn" @click="delThisModule(item,index)" v-if="editable">-->
    <!--<i class="iconfont">&#xe657;</i>-->
    <!--&lt;!&ndash;<i>-</i>&ndash;&gt;-->
    <!--</div>-->
    <!--&lt;!&ndash;<img :src="item.defaultIcon" class="selIcon shake">&ndash;&gt;-->
    <!--&lt;!&ndash;<a href="">{{item.module_icon}}</a>&ndash;&gt;-->
    <!--<i v-html="TEMP_ROOT_DATA.tempCon.modules[item].icon.iconImg" class="iconfont"-->
    <!--@click="clickModuleIcon($event.target.innerHTML,index)-->
    <!--">-->
    <!--</i>-->
    <!--</div>-->
    <!--&lt;!&ndash;<span class="tab-link nowrap"&ndash;&gt;-->
    <!--&lt;!&ndash;:contenteditable="editable"&ndash;&gt;-->
    <!--&lt;!&ndash;@click="selectText($event)">{{item.icon.iconName}}</span>&ndash;&gt;-->
    <!--<textarea name="" id="" v-model="TEMP_ROOT_DATA.tempCon.modules[item].icon.iconName" class="tab-link nowrap" :style="editTextOutLine"-->
    <!--maxlength="5"-->
    <!--placeholder="请输入"-->
    <!--:disabled="!editable"></textarea>-->
    <!--</a>-->
    <!--</li>-->
    <!--</transition-group>-->
    <!--</ul>-->
    <!--</div>-->
    <div class="hideNavTopGroup" ref="hideNavTopGroup" id="hideNavTopGroup"></div>
    <!--选择图标模框-->
    <div class="selIconGroup" ref="selIconGroup" id="selIconGroup" v-if="TEMP_ROOT_DATA">
      <ul class="navTopWrapper selIconWrap" :style="selIconWrapWidth">
        <li
          v-for="(item,index) in TEMP_ROOT_DATA.tempCon.selIconList"
          :key="index"
        >
          <i class="iconfont" v-html="item" @click="clickSelIcon($event.target.innerHTML,index)"></i>
        </li>
      </ul>
      <h2 class="selIconGroupTitle">选一个喜欢的图标吧</h2>
    </div>
    <div class="selIconGroup hideselIconGroup" ref="hideselIconGroup"></div>
    <!--选择模框结束-->
    <!--<div class="navTopGroup hideNavTopGroup" ref="hideNavTopGroup"></div>-->
    <!-- nav end -->
    <!--   模块容器   --------------------------------------------->
    <div id="moduleWrap" ref="moduleWrap" v-if="TEMP_ROOT_DATA">
      <transition-group name="list-complete" tag="div" mode='in-out' class="list-complete">
        <div v-for="(m,index) in mixArray" :key="index" class="list-complete-item">
          <!--index控制模块的顺序-->
          <component
            v-bind:is="m"
            :key="index"
            @del-this-module="delThisModule"
            :TEMP_ROOT_DATA="TEMP_ROOT_DATA"
          >
            <!--传递根数据给子组件数据-->
          </component>
        </div>
      </transition-group>


      <!--如何使用 start-->
      <!--<div class="itemRoot">-->

      <!--</div>-->
      <!--如何使用 end-->
    </div>
    <!--   模块容器   --------------------------------------------->
    <!--立即使用按钮-->
    <div class="confirm" ref="confirm" id="confirm" @click="goEdit" style="" v-if="TEMP_ROOT_DATA">去编辑</div>
    <!--选择模块模框-->
    <div class="selModule" id="selModule" ref="selModule">
      <div class="selModuleWrap" v-if="BAK_DATA">
        <h2 class="selModuleTitle">添加模块<i class="iconfont icon-L1" @click="hideAddModule"></i></h2>
        <div class="modulesCon">
          <div class="modulesConItems"
               v-for="(item,index) in BAK_DATA.tempCon.modules"
               :key="index"
          >
            <img :src="item.icon.moduleImg" alt=""
                 @click.prevent="selThisMd(item,$event.target,index)"
                 :class="{'light':selMdTips === index}">
          </div>
        </div>
        <input type="button" value="添加" ref="addTisMd" class="addTisMd" @click="addMd" :disabled="!selMd"
        >
      </div>
    </div>
    <!--排序模块框-->
    <div class="sortModule" ref="sortModule" v-if="TEMP_ROOT_DATA">
      <div class="sortModuleWrap">
        <h2 class="sortModuleWrapTitle">拖动排序哟<i class="iconfont icon-L1" @click="hideSortModule"></i></h2>
        <draggable
          class="sortStart"
          :move="getdata"
          v-model="TEMP_ROOT_DATA.tempCon.modulesSort"
          @update="datadragEnd"
          :options="{animation:500,dragClass:'dragging'}">
          <div v-for="(item,index) in TEMP_ROOT_DATA.tempCon.modulesSort" :key="index" class="sortItem">
            <h2><a>{{index+1}}</a><i class="iconfont icon-weibiaoti-1"></i>&nbsp;{{TEMP_ROOT_DATA.tempCon.modules[item].icon.iconName}}
            </h2>
          </div>
        </draggable>
      </div>
    </div>
    <!--用户底部操作区-->
    <div id="userBtmBtnGroup" ref="userBtmBtnGroup" v-if="TEMP_ROOT_DATA.tempCon">
      <div class="userBtmBtnGroupItems">
        <a class="leftBtns" :href="'tel:'+ userRetVO.contactTelphone" @click="showAddTel('up',$event)">
          <p class="telIcon"><i class="iconfont icon-nbbPhone1"></i></p>
          <h5>联系我们</h5>
        </a>
        <a class="leftBtns" @click="openFollowMe">
          <p class="telIcon"><i class="iconfont icon-saomiaoerweima"></i></p>
          <h5>关注我们</h5>
        </a>
      </div>
      <div class="userBtmBtnGroupItems" v-if="TEMP_ROOT_DATA || TEMP_ROOT_DATA.tempCon.userActionBtn.middleBtn.btnName">
        <div class="userBtmAddBtn" @click="addBtmBtn('middleBtn')"
             v-if="!TEMP_ROOT_DATA.tempCon.userActionBtn.middleBtn.btnName && editable">
          添加按钮
        </div>
        <div v-else class="btmBtnLink" ref="btmBtnLink" :class="editable ? 'scale': ''">
          <i class="iconfont" v-if="editable && TEMP_ROOT_DATA.tempCon.userActionBtn.middleBtn.btnName"
             @click="delBtmBtn('middleBtn')">&#xe657;</i>
          <a :href="TEMP_ROOT_DATA.tempCon.userActionBtn.middleBtn.btnLink"
             v-html="TEMP_ROOT_DATA.tempCon.userActionBtn.middleBtn.btnName"></a>
        </div>
      </div>
      <div class="userBtmBtnGroupItems" v-if="TEMP_ROOT_DATA || TEMP_ROOT_DATA.tempCon.userActionBtn.rightBtn.btnName">
        <div class="userBtmAddBtn" @click="addBtmBtn('rightBtn')"
             v-if="!TEMP_ROOT_DATA.tempCon.userActionBtn.rightBtn.btnName && editable">
          添加按钮
        </div>
        <div v-else class="btmBtnLink RbtmBtnLink" ref="btmBtnLink" :class="editable ? 'scale': ''">
          <i class="iconfont" v-if="editable && TEMP_ROOT_DATA.tempCon.userActionBtn.rightBtn.btnName"
             @click="delBtmBtn('rightBtn')">&#xe657;</i>
          <a :href="TEMP_ROOT_DATA.tempCon.userActionBtn.rightBtn.btnLink"
             v-html="TEMP_ROOT_DATA.tempCon.userActionBtn.rightBtn.btnName"></a>
        </div>
      </div>
    </div>
    <!--添加互动按钮模框-->
    <div id="addActionBox" ref="addActionBox">
      <h2 class="title">
        <span class="noSaveBtn" ref="noSaveBtn" @click="hideAddBtmBtnBox">取消</span>
        互动按钮设置
        <button class="saveBtn" ref="saveBtn" @click="saveBtmActBtn" :disabled="!wantAddBtnName || !wantAddBtnUrl">保存
        </button>
      </h2>
      <div class="insertGroup">
        <input type="text" placeholder="请输入按钮名称" v-model="wantAddBtnName" maxlength="6">
        <input type="text" placeholder="请输入按钮的有效链接,如:http://······" v-model="wantAddBtnUrl">
      </div>
    </div>
    <!--添加联系电话按钮-->
    <div id="addTelBox" ref="addTelBox">
      <h2 class="title">
        <span class="noSaveBtn" ref="noSaveBtn" @click="showAddTel('down',$event)">取消</span>
        设置联系电话
        <button class="saveBtn" ref="saveBtn" @click="saveTel('down',$event)" :disabled="!userRetVO.contactTelphone">
          保存
        </button>
      </h2>
      <div class="insertGroup">
        <input type="tel" placeholder="请输入联系电话" v-model="userRetVO.contactTelphone" maxlength="15">
      </div>
    </div>
    <!--关注我们模框-->
    <div id="followMe" ref="followMe" v-if="TEMP_ROOT_DATA.tempCon">
      <div class="followMeWrap">
        <h2 class="followMeTitle">&nbsp;<i class="iconfont icon-L1" @click="hideFollowMe"></i></h2>
        <textarea placeholder="请填写公司/个人昵称"
                  :style="editTextOutLine"
                  :disabled="!editable"
                  class="followTxt companyName"
                  v-model="userRetVO.companyName"
                  maxlength="20"
        ></textarea>
        <textarea placeholder="请填您的公司简介/个人简介"
                  :style="editTextOutLine"
                  :disabled="!editable"
                  class="followTxt companyIntro"
                  v-model="userRetVO.companyIntro"
                  maxlength="300"
        ></textarea>
        <div class="qrWrap">
          <div class="qrWrapTop">
            <changeImgTips @change-img="changeImg(userRetVO,'wechatQrImg')"
                           @remove-img="removeImg(userRetVO,'wechatQrImg')"
                           :choseimgfile="choseimgfile"
                           v-if="editable"
            >
            </changeImgTips>
            <img :src="userRetVO.wechatQrImg || 'http://style.iambuyer.com/img/mi-temp-imgs-11.jpg'"
                 alt="">
          </div>
          <div class="qrWrapBtm">
            <p>长按识别图中二维码</p>
            <p>若无法识别，请复制链接在微信中打开</p>
          </div>
        </div>
        <textarea placeholder="联系电话"
                  :style="editTextOutLine"
                  :disabled="!editable"
                  class="followTxt contactTelphone"
                  v-model="userRetVO.contactTelphone"
        ></textarea>
        <textarea placeholder="联系邮箱"
                  :style="editTextOutLine"
                  :disabled="!editable"
                  class="followTxt"
                  v-model="userRetVO.contactEmail"
        ></textarea>
        <textarea placeholder="具体地址"
                  :style="editTextOutLine"
                  :disabled="!editable"
                  class="followTxt"
                  v-model="userRetVO.addressDetail"
        ></textarea>
        <input
          type="button"
          value="保存"
          class="saveFollowMe"
          v-if="editable"
          @click="saveFollowMe"
          :disabled="!userRetVO.companyName||!userRetVO.companyIntro||!userRetVO.contactTelphone||!userRetVO.contactEmail||!userRetVO.addressDetail"
        >
      </div>
    </div>
    <!--点赞与否-->
    <div class="isLikeWrap" v-if="INSTRC_ROOT_DATA.isLike">
      <p class="isLike">
        <i class="iconfont"
           :class="INSTRC_ROOT_DATA.isLike == '0' ? 'icon-dianzan' : 'icon-dianzan1'"
           @click="isLike"
        ></i>&nbsp;<span v-html="INSTRC_ROOT_DATA.likeCn"></span>
      </p>
      <!--<p class="noLike">-->
      <!--<i class="iconfont icon-dianzan1"></i><span>123</span>-->
      <!--</p>-->
    </div>
    <!--底部logo-->
    <myFooter2></myFooter2>
    <!--编辑中的按钮-->
    <div class="ediTingBtmBtns" ref="ediTingBtmBtns" id="ediTingBtmBtns" style="" v-if="TEMP_ROOT_DATA">
      <div class="ediTingBtmBtnsItems" @click="saveDraft" v-if="!againEditting">
        <a><i class="iconfont icon-shiyong01"></i> &nbsp;存为草稿</a>
      </div>
      <div class="ediTingBtmBtnsItems" @click="temp_preview">
        <a><i class="iconfont icon-L2"></i> &nbsp;预览</a>
      </div>
      <div class="ediTingBtmBtnsItems goLine" @click="addDesc" v-if="!againEditting">
        <a>发布上线</a>
      </div>
      <div class="ediTingBtmBtnsItems goLine" @click="addDesc" v-else>
        <a>更新一波</a>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import changeImgTips from 'components/businessModules/businessPublicModule/changeImgTips'
  import {gethashcode} from 'common/js/hash'
  import * as moduleString from './moduleString'
  import * as API from "config/api";
  import {addClass, autoTextarea} from 'common/js/dom'
  import BScroll from 'better-scroll'
  import {mapMutations, mapGetters} from 'vuex'
  import {itemsMixin} from 'common/js/mdMixin'
  import {itemsFuncMixin} from 'common/js/mdFunc'
  import draggable from 'vuedraggable'
  import myFooter2 from "@/components/globalModules/myFooter2"
  import wxApi from "../../../mixins/wxapi.js"; //微信分享sdk

  export default {
    name: "mi-temp",
    mixins: [itemsMixin, wxApi],
    data() {
      return {
        shareTitle: "",
        shareIntro: "",
        shareImg: "",
        instrucId: "",
        // shareLink: window.location.origin+"/rest-rp/wechat/portal/shareUrl?instrucId="+this.$route.query.instrucId+"&tempId="+this.TEMP_ROOT_DATA.tempId+"&urlName="+this.TEMP_ROOT_DATA.path,
        userId: window.localStorage.getItem('userId'),
        //说明书信息
        INSTRC_ROOT_DATA: '',
        /*模板原始值*/
        TEMP_ROOT_DATA: '',
        //备份数据
        BAK_DATA: '',
        // 原始模块
        OriginalModule: {},
        //渲染模块顺序
        mixArray: [],
        //模块的个数
        moduleLength: '',
        //是否可编辑
        editable: false,
        sortModules: [],
        // 追加的两个按钮
        add_icon: {
          "icon": {
            "iconImg": "&#xe62e;",
            "iconName": "添加模块",
            "noEdit": true
          }
        },
        sort_icon: {
          "icon": {
            "iconImg": "&#xe64e;",
            "iconName": "更改顺序",
            "noEdit": true
          }
        },
        // 添加模块时选中的模块的index
        selMdTips: 0,
        // 添加模块时选中的即将添加的模块的名字
        selMd: '',
        /*banner start*/
        banner: {
          dots: [],
          currentPageIndex: 0,
          loop: true,
          autoPlay: true,
          interval: 4000,
          bannerImgFile: 'bid'
        },
        /*banner end*/
        /*nav start*/
        nav: {
          // 屏幕宽度
          screenWidth: document.body.clientWidth
        },
        // 点击选择的即将更换的图标
        wantChangeIcon: '',
        /*nav end*/
        //即将添加的底部按钮
        wantAddBtn: '',
        wantAddBtnName: '',
        wantAddBtnUrl: '',
        //即将添加的联系电话
        wantAddTel: '',
        //个人中心的用户信息
        userRetVO: {
          companyName: '',
          companyIntro: '',
          wechatQrImg: '',
          contactTelphone: '',
          contactEmail: '',
          addressDetail: ''
        },
        isSelIconStyle: '',
        choseimgfile: 'rooFile',
        //再次回来编辑的标记
        againEditting: '',
        client_h: document.documentElement.clientHeight,
        // 手机号验证
        isPhone: /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/,
        // 座机号验证
        isMob: /^(0[0-9]{2,3}\-)([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/,
        // url验证
        // isUrl: /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/,
        // 邮箱验证
        isEmail: /("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$")/,
        nowScrollTop: ''
      }
    },
    watch: {
      GET_EDITABLE(v) {
        if (v === true) {
          this.editable = true
        } else {
          this.editable = false
        }
      }
    },
    beforeCreate() {
      if (this.$route.query.confirmEdit) {
        // 入口为模板选择
        API._getTempDetail(this.$route.query.tempId, '').then(res => {
          this.TEMP_ROOT_DATA = JSON.parse(JSON.stringify(res.content.context))
          this.instrucCustType = res.content.instrucCustType
          this.setTempData(JSON.parse(JSON.stringify(res.content.context)))
          this.BAK_DATA = JSON.parse(JSON.stringify(JSON.parse(JSON.stringify(this.GET_TEMP_DATA))))
          console.log('是否为可编辑状态：' + this.GET_EDITABLE)
          // 微信分享
          this.wxApiG();
        })
      } else if (this.$route.query.instrucId && this.$route.query.tempId && !this.$route.query.wxId) {
        // 入口为再次编辑
        console.log('入口为编辑')
        // this.TEMP_ROOT_DATA = JSON.parse(JSON.stringify(this.GET_TEMP_DATA))
        API._getTempDetail(this.$route.query.tempId, '').then((res) => {
          if (res.ret === API.ERROK) {
            this.BAK_DATA = JSON.parse(JSON.stringify(JSON.parse(JSON.stringify(res.content.context))))
          }
        })
        // this.againEditEntry(true)
      } else if (this.$route.query.wxId) {
        console.log('beforeCreate入口为分享')
        //获取说明书数据
        API._UserSeeInstrucDetails(this.$route.query.instrucId, this.$route.query.wxId).then(res => {
          if (res.ret == API.ERROK) {
            this.TEMP_ROOT_DATA = JSON.parse(JSON.stringify(res.content.context))
            this.INSTRC_ROOT_DATA = JSON.parse(JSON.stringify(res.content))
            console.log(this.TEMP_ROOT_DATA)
            this.setTempData(JSON.parse(JSON.stringify(res.content.context)))
            this.againEditEntry(false)
            // setTimeout(() => {
            //   // this.temp_preview()
            //   this.editable = false
            //   this.set_edit(false)
            //   this.TEMP_ROOT_DATA.tempCon.editable = false
            // }, 500)
            // this.editable = false
            // this.$refs.confirm.style.bottom = '-1.173333rem'
            // document.getElementById('confirm').style.bottom = '-1.173333rem'
          }
        });
      }
    },
    created() {
      if (this.$route.query.confirmEdit) {
        console.log('入口为模板列表')
        // 微信分享
        this.wxApiG();
        this.TEMP_ROOT_DATA = JSON.parse(JSON.stringify(this.GET_TEMP_DATA))
        this.BAK_DATA = JSON.parse(JSON.stringify(JSON.parse(JSON.stringify(this.GET_TEMP_DATA))))
        console.log('是否为可编辑状态：' + this.GET_EDITABLE)
      }
      else if (this.$route.query.wxId) {
        console.log('Create入口为分享')
        //获取说明书数据
        // API._InstrucDetails(this.$route.query.instrucId).then(res => {
        //   if (res.ret == API.ERROK) {
        // this.TEMP_ROOT_DATA = JSON.parse(JSON.stringify(res.content.context))
        // this.setTempData(JSON.parse(JSON.stringify(res.content.context)))
        // this.againEditEntry(false)
        setTimeout(() => {
          // this.temp_preview()
          this.editable = false
          this.set_edit(false)
          this.TEMP_ROOT_DATA.tempCon.editable = false
        }, 2000)
        this.editable = false
        // this.$refs.confirm.style.bottom = '-1.173333rem'
        // document.getElementById('confirm').style.bottom = '-1.173333rem'
        // }
        // });
      } else if (this.$route.query.instrucId && this.$route.query.tempId) {
        console.log('入口为编辑')
        this.TEMP_ROOT_DATA = JSON.parse(JSON.stringify(this.GET_TEMP_DATA))
        API._getTempDetail(this.$route.query.tempId, '').then((res) => {
          if (res.ret === API.ERROK) {
            this.BAK_DATA = JSON.parse(JSON.stringify(JSON.parse(JSON.stringify(res.content.context))))
          }
        })
        this.againEditEntry(true)
      }
    },
    mounted() {
      this.$nextTick(() => {
        //默认选中第一个模块的图标
        setTimeout(() => {

          //图标顺序
          let wantSortMd = JSON.parse(JSON.stringify(this.TEMP_ROOT_DATA.tempCon.modules))
          let toSortMd = JSON.parse(JSON.stringify(this.mixArray))
          let doneMd = []
          for (let i = 0; i < toSortMd.length; i++) {
            doneMd.push({[toSortMd[i]]: wantSortMd[toSortMd[i]]})
          }
          let changeDoneMd = {}
          for (let i = 0; i < doneMd.length; i++) {
            changeDoneMd[[toSortMd[i]]] = wantSortMd[toSortMd[i]]
          }
          this.TEMP_ROOT_DATA.tempCon.modules = changeDoneMd
          this.isSelIconStyle = JSON.parse(JSON.stringify(this.TEMP_ROOT_DATA.tempCon.modulesSort[0]))
        }, 800)
        //微信分享sdk
        wxApi.wxRegister(this.wxRegCallback);
        window.addEventListener('scroll', this.hScroll)
        this.mixin2array()
        //区分是从选择模板过来还是用户从其它途径过来
        if (this.$route.query.confirmEdit) {
          //入口为从模板选择进入状态
          this.OriginalModule = itemsMixin.components
        } else if (this.$route.query.wxId || this.$route.query.lookMyInstrc) {

          // 入口为用户浏览状态
          console.log('入口为用户浏览状态。。')
          this.set_edit(true)
          this.$nextTick(() => {
            // 设置分享配置
            API._InstrucDetails(this.$route.query.instrucId).then((res) => {
              if (res.ret == API.ERROK) {
                // this.instrucId = res.content.instrucId
                this.shareTitle = res.content.instrucTitle;
                this.shareIntro = res.content.instrucIntro;
                this.shareImg = res.content.bannerImg;
                this.instrucId = res.content.instrucId;
                console.log("zhezhifenxiangpeizhi")
                //微信分享sdk
                wxApi.wxRegister(this.wxRegCallback);
              }
            })
            setTimeout(() => {
              // this.goEdit()
              this.temp_preview()
              this.editable = false
              this.set_edit(false)
              if (this.TEMP_ROOT_DATA.tempCon.editable) {
                this.TEMP_ROOT_DATA.tempCon.editable = false
              }
              document.getElementById('confirm').style.bottom = '-1.173333rem'
              this.set_banner_height('5.333333rem')
              new BScroll('.navTopGroup', {
                scrollX: true,
                click: true
              })
            }, 500)
          })
          if (document.getElementById('confirm')) {
            document.getElementById('confirm').style.bottom = '-1.173333rem'
          }
          //说明书访问统计
          API._instrucDate('0', this.$route.query.instrucId).then((res) => {
          })
        } else if (this.$route.query.instrucId && this.$route.query.tempId && !this.$route.query.wxId) {
          //入口为编辑状态
          this.$nextTick(() => {
            this.set_edit(false)
            setTimeout(() => {
              this.againEditting = true
              this.temp_preview()
              this.goEdit()
              this.editable = true
              this.set_edit(true)
              this.TEMP_ROOT_DATA.tempCon.editable = true
              // 用户回来编辑的时候把上传成功的图片数组清空
              this.TEMP_ROOT_DATA.tempCon.succImgList.splice(0, this.TEMP_ROOT_DATA.tempCon.succImgList.length)
            }, 500)
          })
        }
        //获取到所有textarea并处理自适应高度的问题
        // let test = document.querySelectorAll('textarea')
        // for (let i = 0; i < test.length; i++) {
        //   autoTextarea(test[i])
        // }
        //获取个人信息以填充联系电话
        if (this.LS.getItem('userId')) {
          API._GetUserInfo(this.LS.getItem('userId')).then((res) => {
            if (res.ret == API.ERROK) {
              this.userRetVO.companyName = JSON.parse(JSON.stringify(res.content.companyName))
              this.userRetVO.companyIntro = JSON.parse(JSON.stringify(res.content.companyIntro))
              this.userRetVO.wechatQrImg = JSON.parse(JSON.stringify(res.content.wechatQrImg))
              this.userRetVO.contactTelphone = JSON.parse(JSON.stringify(res.content.contactTelphone))
              this.userRetVO.contactEmail = JSON.parse(JSON.stringify(res.content.contactEmail))
              this.userRetVO.addressDetail = JSON.parse(JSON.stringify(res.content.addressDetail))
            }
          })
        }
        if (this.$route.query.instrucId) {
          API._InstrucDetails(this.$route.query.instrucId).then((res) => {
            if (res.ret == API.ERROK) {
              this.userRetVO.companyName = JSON.parse(JSON.stringify(res.content.userRetVO.companyName))
              this.userRetVO.companyIntro = JSON.parse(JSON.stringify(res.content.userRetVO.companyIntro))
              this.userRetVO.wechatQrImg = JSON.parse(JSON.stringify(res.content.userRetVO.wechatQrImg))
              this.userRetVO.contactTelphone = JSON.parse(JSON.stringify(res.content.userRetVO.contactTelphone))
              this.userRetVO.contactEmail = JSON.parse(JSON.stringify(res.content.userRetVO.contactEmail))
              this.userRetVO.addressDetail = JSON.parse(JSON.stringify(res.content.userRetVO.addressDetail))
              setTimeout(() => {
                let test = document.querySelectorAll('textarea')
                for (let i = 0; i < test.length; i++) {
                  autoTextarea(test[i])
                }
              }, 500)
            }
          })
        }

        /**
         * banner start
         * **/
        setTimeout(() => {
          if (document.getElementById('slider-wrapper')) {
            this.set_banner_height(document.getElementById('slider-wrapper').offsetHeight)
          }
        }, 1000)

        /**
         * banner end
         * **/
        /**
         * nav start
         * **/
        window.addEventListener('scroll', this.hScroll)
        setTimeout(() => {
          let scroll = new BScroll('#navTopGroup', {
            scrollX: true,
            click: true
          })
          let selscroll = new BScroll('.selIconGroup', {
            scrollX: true,
            click: true
          })
        }, 1000)

        /**
         * nav end
         * **/

      })
    },
    methods: {
      /**
       * [wxRegCallback 用于微信JS-SDK回调]
       */
      wxRegCallback() {
        this.wxShareTimeline();
        this.wxShareAppMessage();
      },
      /**
       * [wxShareTimeline 微信自定义分享到朋友圈]
       */
      wxShareTimeline() {
        let _this = this;
        let opstion1 = {
          title: this.shareTitle, // 分享标题
          link: "http://api.ruhexiu.com/rest-rp/wechat/portal/shareUrl?instrucId=" + this.instrucId + "&tempId=" + this.TEMP_ROOT_DATA.tempId + "&urlName=" + this.TEMP_ROOT_DATA.path, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.shareImg, // 分享图标
          success: function () {
            API._shareTotals(_this.instrucId).then(res => {
              alert("分享成功");
            })
          },
          error: function () {
            alert("分享失败");
          }
        };
        // 将配置注入通用方法
        wxApi.ShareTimeline(opstion1);
      },
      wxShareAppMessage() {
        let _this = this;
        let opstion2 = {
          title: this.shareTitle, // 分享标题
          desc: this.shareIntro, // 分享描述
          link: "http://api.ruhexiu.com/rest-rp/wechat/portal/shareUrl?instrucId=" + this.instrucId + "&tempId=" + this.TEMP_ROOT_DATA.tempId + "&urlName=" + this.TEMP_ROOT_DATA.path, // 分享链接
          imgUrl: this.shareImg, // 分享图标
          success: function () {
            API._shareTotals(_this.instrucId).then(res => {
              alert("分享成功");
            })
          },
          error: function () {
            alert("分享失败");
          }
        };
        // 将配置注入通用方法
        wxApi.ShareAppMessage(opstion2);
      },
      //点赞
      isLike() {
        if (this.INSTRC_ROOT_DATA.isLike === '0') {
          API._instrucLike(this.$route.query.instrucId, this.$route.query.wxId)
          this.INSTRC_ROOT_DATA.isLike = '1'
          this.INSTRC_ROOT_DATA.likeCn += 1
        }

      },
      // 点击替换图片按钮
      changeImg(imgPath, key) {
        this.choseImgPath = imgPath
        this.choseImgKey = key
      },
      // 点击删除图片
      removeImg(imgPath, key) {
        imgPath[key] = ''
      },
      // 选择后的文件对象并上传
      getThisFile(e) {
        this.thisImgFile = e.target.files[0]
        console.log(this.thisImgFile)
        lrz(this.thisImgFile).then((afterImg) => {
          const that = this
          let formData = new FormData()
          formData.append('file', afterImg.file)
          formData.append('systemName', 'ruhexiu')
          API._UploadImg(formData).then((res) => {
            if (res.ret === API.ERROK) {
              let fD = new FormData()
              fD.append('fileName', res.name)
              API._uploadSuccess(fD).then((rs) => {
                if (rs.ret === API.ERROK) {
                  that.$set(that.choseImgPath, that.choseImgKey, rs.httpUrl)
                }
              })
            }
          })
          console.log(afterImg)
        })
        e.target.value = ''
      },
      //基于userId或者产品id获取用户信息以便在关注我们页和联系电话页操作
      gUinfo() {
        if (this.editable && this.LS.getItem('userId')) {
          API._GetUserInfo(this.LS.getItem('userId')).then((res) => {
            if (res.ret == API.ERROK) {
              this.userRetVO.companyName = JSON.parse(JSON.stringify(res.content.companyName))
              this.userRetVO.companyIntro = JSON.parse(JSON.stringify(res.content.companyIntro))
              this.userRetVO.wechatQrImg = JSON.parse(JSON.stringify(res.content.wechatQrImg))
              this.userRetVO.contactTelphone = JSON.parse(JSON.stringify(res.content.contactTelphone))
              this.userRetVO.contactEmail = JSON.parse(JSON.stringify(res.content.contactEmail))
              this.userRetVO.addressDetail = JSON.parse(JSON.stringify(res.content.addressDetail))
              setTimeout(() => {
                let test = document.querySelectorAll('textarea')
                for (let i = 0; i < test.length; i++) {
                  autoTextarea(test[i])
                }
              }, 500)
            }
          })
        } else if (this.$route.query.instrucId) {
          API._InstrucDetails(this.$route.query.instrucId).then((res) => {
            if (res.ret == API.ERROK) {
              this.userRetVO.companyName = JSON.parse(JSON.stringify(res.content.userRetVO.companyName))
              this.userRetVO.companyIntro = JSON.parse(JSON.stringify(res.content.userRetVO.companyIntro))
              this.userRetVO.wechatQrImg = JSON.parse(JSON.stringify(res.content.userRetVO.wechatQrImg))
              this.userRetVO.contactTelphone = JSON.parse(JSON.stringify(res.content.userRetVO.contactTelphone))
              this.userRetVO.contactEmail = JSON.parse(JSON.stringify(res.content.userRetVO.contactEmail))
              this.userRetVO.addressDetail = JSON.parse(JSON.stringify(res.content.userRetVO.addressDetail))
              setTimeout(() => {
                let test = document.querySelectorAll('textarea')
                for (let i = 0; i < test.length; i++) {
                  autoTextarea(test[i])
                }
              }, 500)
            }
          })
        }
      },
      //打开关注我们
      openFollowMe() {
        this.gUinfo()
        this.$refs.followMe.style.top = 0
        this.appFixedOrStatic('fixed')
      },
      //隐藏关注我们
      hideFollowMe() {
        this.$refs.followMe.style.top = '100%'
        this.appFixedOrStatic('static')
      },
      //保存个人资料信息
      saveUinfo() {
        // console.log((this.userRetVO.wechatQrImg).split('/').pop())
        API._UpdateUserInfoGZ(this.LS.getItem('userId'), this.userRetVO).then((res) => {
          console.log(res)
        })
      },
      //保存输入的关注我们的信息
      saveFollowMe() {
        if (!this.isPhone.test(this.userRetVO.contactTelphone) && !this.isEmail.test(this.userRetVO.contactEmail)) {
          this.$vux.toast.show({
            width: "60%",
            text: "请输入正确的手机号或邮箱",
            type: "text",
            position: "middle",
            onHide: () => {
              // this.wantAddTel = ''
            }
          });
        } else {
          this.$refs.followMe.style.top = '27.786667rem'
          this.appFixedOrStatic('static')
          //保存个人资料信息
          this.saveUinfo()
        }

      },
      //删除底部二个按钮
      delBtmBtn(btn) {
        if (btn === 'middleBtn') {
          this.$delete(this.TEMP_ROOT_DATA.tempCon.userActionBtn.middleBtn, 'btnName')
          this.$delete(this.TEMP_ROOT_DATA.tempCon.userActionBtn.middleBtn, 'btnLink')
        } else if (btn === 'rightBtn') {
          this.$delete(this.TEMP_ROOT_DATA.tempCon.userActionBtn.rightBtn, 'btnName')
          this.$delete(this.TEMP_ROOT_DATA.tempCon.userActionBtn.rightBtn, 'btnLink')
        }
      },
      //保存底部操作区域的两个互动按钮
      saveBtmActBtn() {
        if (this.wantAddBtn === 'middleBtn') {
          this.$set(this.TEMP_ROOT_DATA.tempCon.userActionBtn.middleBtn, 'btnName', this.wantAddBtnName)
          this.$set(this.TEMP_ROOT_DATA.tempCon.userActionBtn.middleBtn, 'btnLink', this.wantAddBtnUrl)
          console.log(this.TEMP_ROOT_DATA.tempCon.userActionBtn.middleBtn)
        }
        if (this.wantAddBtn === 'rightBtn') {
          this.$set(this.TEMP_ROOT_DATA.tempCon.userActionBtn.rightBtn, 'btnName', this.wantAddBtnName)
          this.$set(this.TEMP_ROOT_DATA.tempCon.userActionBtn.rightBtn, 'btnLink', this.wantAddBtnUrl)
          console.log(this.TEMP_ROOT_DATA.tempCon.userActionBtn.rightBtn)
        }
        this.wantAddBtnName = ''
        this.wantAddBtnUrl = ''
        this.hideAddBtmBtnBox()
        // }

      },
      //保存联系电话
      saveTel() {
        if (!this.isPhone.test(this.userRetVO.contactTelphone) && !this.isMob.test(this.userRetVO.contactTelphone)) {
          this.$vux.toast.show({
            width: "60%",
            text: "请输入正确电话号码",
            type: "text",
            position: "middle",
            onHide: () => {
              // this.wantAddTel = ''
            }
          });
        } else {
          this.$refs.addTelBox.style.bottom = '-7.933333rem'
          this.$set(this.userRetVO, 'contactTelphone', this.userRetVO.contactTelphone)
          this.saveUinfo()
        }

      },
      //点击添加底部按钮操作
      addBtmBtn(btn) {
        this.wantAddBtn = btn
        console.log(this.wantAddBtn)
        this.AddBtmBtnBox('up')
      },
      //点击添加联系电话
      showAddTel(updown, event) {
        this.gUinfo()
        if (this.editable) {
          event.preventDefault()
          updown === 'up' ? this.$refs.addTelBox.style.bottom = '2.6rem' : ''
          updown === 'down' ? this.$refs.addTelBox.style.bottom = '-7.933333rem' : ''
        }
      },
      //取消显示添加按钮模框
      hideAddBtmBtnBox() {
        this.AddBtmBtnBox('down')
      },
      //显示隐藏添加按钮模框
      AddBtmBtnBox(updown) {
        updown === 'up' ? this.$refs.addActionBox.style.bottom = '2.6rem' : ''
        updown === 'down' ? this.$refs.addActionBox.style.bottom = '-7.933333rem' : ''
      },
      //再次编辑的入口
      againEditEntry(t) {
        API._InstrucDetails(this.$route.query.instrucId).then(res => {
          if (res.ret === API.ERROK) {
            console.log(res.content)
            document.title = res.content.instrucTitle
            this.TEMP_ROOT_DATA = res.content.context
            //遍历再次编辑的模块的顺序然后动态注册组件
            for (let md of this.TEMP_ROOT_DATA.tempCon.modulesSort) {
              let len = md.split("_").length
              if (len === 2) {
                switch (md) {
                  case 'mi_desc':
                    const desc = Vue.extend({
                      mixins: [itemsFuncMixin],
                      props: ['TEMP_ROOT_DATA'],
                      template: moduleString.miDesc(),
                      data() {
                        return {
                          // 选择图片文件的id
                          choseimgfile: gethashcode(),
                          editable: t,
                          mdKey: md,
                          dataPath: '',
                          //排序追加项目专用数据指向
                          sortPath: ''
                        }
                      },
                      created() {
                        this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                        this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].descCon
                      }
                    })
                    Vue.component(md, desc)
                    this.mixArray.push(md)
                    break;
                  case 'mi_install':
                    const install = Vue.extend({
                      mixins: [itemsFuncMixin],
                      props: ['TEMP_ROOT_DATA'],
                      template: moduleString.miInstall(),
                      data() {
                        return {
                          // 选择图片文件的id
                          choseimgfile: gethashcode(),
                          editable: t,
                          mdKey: md,
                          dataPath: '',
                          //排序追加项目专用数据指向
                          sortPath: ''
                        }
                      },
                      created() {
                        this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                        this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].installCon
                      }
                    })
                    Vue.component(md, install)
                    this.mixArray.push(md)
                    break;
                  case 'mi_use':
                    const use = Vue.extend({
                      mixins: [itemsFuncMixin],
                      props: ['TEMP_ROOT_DATA'],
                      template: moduleString.miUse(),
                      data() {
                        return {
                          // 选择图片文件的id
                          choseimgfile: gethashcode(),
                          editable: t,
                          mdKey: md,
                          dataPath: '',
                          //排序追加项目专用数据指向
                          sortPath: ''
                        }
                      },
                      created() {
                        this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                        this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].useCon
                      }
                    })
                    Vue.component(md, use)
                    this.mixArray.push(md)
                    break;
                  case 'mi_contact':
                    const contact = Vue.extend({
                      mixins: [itemsFuncMixin],
                      props: ['TEMP_ROOT_DATA'],
                      template: moduleString.miContact(),
                      data() {
                        return {
                          // 选择图片文件的id
                          choseimgfile: gethashcode(),
                          editable: t,
                          mdKey: md,
                          dataPath: '',
                          //排序追加项目专用数据指向
                          sortPath: ''
                        }
                      },
                      created() {
                        this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                        this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].contactCon
                      }
                    })
                    Vue.component(md, contact)
                    this.mixArray.push(md)
                    break;
                  case 'mi_canshu':
                    const canshu = Vue.extend({
                      mixins: [itemsFuncMixin],
                      props: ['TEMP_ROOT_DATA'],
                      template: moduleString.miCanshu(),
                      data() {
                        return {
                          // 选择图片文件的id
                          choseimgfile: gethashcode(),
                          editable: t,
                          mdKey: md,
                          dataPath: '',
                          //排序追加项目专用数据指向
                          sortPath: ''
                        }
                      },
                      created() {
                        this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                        this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].canshuCon
                      }
                    })
                    Vue.component(md, canshu)
                    this.mixArray.push(md)
                    break;
                  case 'mi_care':
                    const care = Vue.extend({
                      mixins: [itemsFuncMixin],
                      props: ['TEMP_ROOT_DATA'],
                      template: moduleString.miCare(),
                      data() {
                        return {
                          // 选择图片文件的id
                          choseimgfile: gethashcode(),
                          editable: t,
                          mdKey: md,
                          dataPath: '',
                          //排序追加项目专用数据指向
                          sortPath: ''
                        }
                      },
                      created() {
                        this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                        this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].careCon
                      }
                    })
                    Vue.component(md, care)
                    this.mixArray.push(md)
                    break;
                }
              } else if (len === 3) {
                console.log('用户新增的模块')
                let HashMdName = md.split("_").splice(0, 2).join("_")
                let HashMdHash = md.split("_")[md.split("_").length - 1]
                switch (HashMdName) {
                  case 'mi_desc':
                    const desc = Vue.extend({
                      mixins: [itemsFuncMixin],
                      props: ['TEMP_ROOT_DATA'],
                      template: moduleString.miDesc(),
                      data() {
                        return {
                          // 选择图片文件的id
                          choseimgfile: gethashcode(),
                          editable: t,
                          mdKey: md,
                          dataPath: '',
                          //排序追加项目专用数据指向
                          sortPath: ''
                        }
                      },
                      created() {
                        this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                        this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].descCon
                      }
                    })
                    Vue.component(md, desc)
                    this.mixArray.push(md)
                    break;
                  case 'mi_install':
                    const install = Vue.extend({
                      mixins: [itemsFuncMixin],
                      props: ['TEMP_ROOT_DATA'],
                      template: moduleString.miInstall(),
                      data() {
                        return {
                          // 选择图片文件的id
                          choseimgfile: gethashcode(),
                          editable: t,
                          mdKey: md,
                          dataPath: '',
                          //排序追加项目专用数据指向
                          sortPath: ''
                        }
                      },
                      created() {
                        this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                        this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].installCon
                      }
                    })
                    Vue.component(md, install)
                    this.mixArray.push(md)
                    break;
                  case 'mi_use':
                    const use = Vue.extend({
                      mixins: [itemsFuncMixin],
                      props: ['TEMP_ROOT_DATA'],
                      template: moduleString.miUse(),
                      data() {
                        return {
                          // 选择图片文件的id
                          choseimgfile: gethashcode(),
                          editable: t,
                          mdKey: md,
                          dataPath: '',
                          //排序追加项目专用数据指向
                          sortPath: ''
                        }
                      },
                      created() {
                        this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                        this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].useCon
                      }
                    })
                    Vue.component(md, use)
                    this.mixArray.push(md)
                    break;
                  case 'mi_contact':
                    const contact = Vue.extend({
                      mixins: [itemsFuncMixin],
                      props: ['TEMP_ROOT_DATA'],
                      template: moduleString.miContact(),
                      data() {
                        return {
                          // 选择图片文件的id
                          choseimgfile: gethashcode(),
                          editable: t,
                          mdKey: md,
                          dataPath: '',
                          //排序追加项目专用数据指向
                          sortPath: ''
                        }
                      },
                      created() {
                        this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                        this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].contactCon
                      }
                    })
                    Vue.component(md, contact)
                    this.mixArray.push(md)
                    break;
                  case 'mi_canshu':
                    const canshu = Vue.extend({
                      mixins: [itemsFuncMixin],
                      props: ['TEMP_ROOT_DATA'],
                      template: moduleString.miCanshu(),
                      data() {
                        return {
                          // 选择图片文件的id
                          choseimgfile: gethashcode(),
                          editable: t,
                          mdKey: md,
                          dataPath: '',
                          //排序追加项目专用数据指向
                          sortPath: ''
                        }
                      },
                      created() {
                        this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                        this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].canshuCon
                      }
                    })
                    Vue.component(md, canshu)
                    this.mixArray.push(md)
                    break;
                  case 'mi_care':
                    const care = Vue.extend({
                      mixins: [itemsFuncMixin],
                      props: ['TEMP_ROOT_DATA'],
                      template: moduleString.miCare(),
                      data() {
                        return {
                          // 选择图片文件的id
                          choseimgfile: gethashcode(),
                          editable: t,
                          mdKey: md,
                          dataPath: '',
                          //排序追加项目专用数据指向
                          sortPath: ''
                        }
                      },
                      created() {
                        this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                        this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].careCon
                      }
                    })
                    Vue.component(md, care)
                    this.mixArray.push(md)
                    break;
                }
              }
            }
          } else {
            alert(res.msg)
          }
        });
      },
      // 添加说明书简介
      addDesc() {
        this.temp_preview()
        setTimeout(() => {
          this.setTempData(JSON.parse(JSON.stringify(this.TEMP_ROOT_DATA)))
          this.LS.setItem('_IN_DATA', JSON.parse(JSON.stringify(this.TEMP_ROOT_DATA)))
          if (!this.againEditting) {
            console.log('测试第一次提交')
            //第一次提交
            this.$router.push({path: "/adddesc", query: {formal: '200', instrucCustType: this.instrucCustType}})
          } else {
            console.log('测试更新说明书')
            //更新说明书
            this.$router.push({path: "/adddesc", query: {update: '200', instrucId: this.$route.query.instrucId, instrucCustType: this.instrucCustType}})
          }
        }, 188)
      },
      // 存草稿操作
      saveDraft() {
        this.temp_preview()
        setTimeout(() => {
          this.setTempData(JSON.parse(JSON.stringify(this.TEMP_ROOT_DATA)))
          this.LS.setItem('_IN_DATA', JSON.parse(JSON.stringify(this.TEMP_ROOT_DATA)))
          this.$router.push({path: "/adddesc", query: {draft: '200', instrucCustType: this.instrucCustType}})
        }, 500)
      },
      //锚点定位
      goID(ID) {
        this.isSelIconStyle = ID
        let anchor = document.getElementById(ID)
        if (anchor) {
          $('html').animate({scrollTop: anchor.offsetTop - 120})
          $('body').animate({scrollTop: anchor.offsetTop - 120})
        }
      },
      //添加模块操作
      addMd() {
        //当前要添加的模块的名字
        console.log(this.selMd)
        //制造要添加的模块在数据中的名字(key) 例如 : mi_desc
        let addModuleKey = this.selMd + gethashcode()
        //复制要添加的模块的数据
        let addModuleData = JSON.parse(JSON.stringify(this.BAK_DATA.tempCon.modules[this.selMd]))
        console.log(addModuleData)
        //更改要添加的模块的数据的模块
        addModuleData.icon.moduleName = addModuleKey
        //干掉那两个增加个排序的图标
        this.delAddAndSortBtn()
        //更改本地的数据
        this.$set(this.TEMP_ROOT_DATA.tempCon.modules, addModuleKey, addModuleData)
        //找回那两个增加个排序的图标
        this.addAddAndSortBtn()
        //追加要添加的模块的名字到顺序维护数组
        this.TEMP_ROOT_DATA.tempCon.modulesSort.push(addModuleKey)
        //隐藏当前添加模块框
        this.hideAddModule()
        //追加模块到页面中
        //判断要添加的模块的名字，因为有的模块会有多个项，多个项的模块操纵难度会增加一个维度，鉴于时间关系暂定switch case
        switch (this.selMd) {
          case 'mi_desc':
            const desc = Vue.extend({
              mixins: [itemsFuncMixin],
              props: ['TEMP_ROOT_DATA'],
              template: moduleString.miDesc(),
              data() {
                return {
                  // 选择图片文件的id
                  choseimgfile: gethashcode(),
                  editable: true,
                  mdKey: addModuleKey,
                  dataPath: '',
                  //排序追加项目专用数据指向
                  sortPath: ''
                }
              },
              created() {
                this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].descCon
              }
            })
            Vue.component(addModuleKey, desc)
            this.mixArray.push(addModuleKey)
            console.log('添加产品简介模块')
            break;
          case 'mi_install':
            const install = Vue.extend({
              mixins: [itemsFuncMixin],
              props: ['TEMP_ROOT_DATA'],
              template: moduleString.miInstall(),
              data() {
                return {
                  // 选择图片文件的id
                  choseimgfile: gethashcode(),
                  editable: true,
                  dataPath: '',
                  //模块的key
                  mdKey: addModuleKey,
                  //排序追加项目专用数据指向
                  sortPath: '',

                }
              },
              created() {
                this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].installCon
              }
            })
            Vue.component(addModuleKey, install)
            this.mixArray.push(addModuleKey)
            console.log('添加如何安装模块')
            break;
          case 'mi_use':
            const use = Vue.extend({
              mixins: [itemsFuncMixin],
              props: ['TEMP_ROOT_DATA'],
              template: moduleString.miUse(),
              data() {
                return {
                  // 选择图片文件的id
                  choseimgfile: gethashcode(),
                  editable: true,
                  dataPath: '',
                  //模块的key
                  mdKey: addModuleKey,
                  //排序追加项目专用数据指向
                  sortPath: '',

                }
              },
              created() {
                this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].useCon
              }
            })
            Vue.component(addModuleKey, use)
            this.mixArray.push(addModuleKey)
            console.log('添加如何使用模块')
            break;
          case 'mi_contact':
            const contact = Vue.extend({
              mixins: [itemsFuncMixin],
              props: ['TEMP_ROOT_DATA'],
              template: moduleString.miContact(),
              data() {
                return {
                  // 选择图片文件的id
                  choseimgfile: gethashcode(),
                  editable: true,
                  dataPath: '',
                  //模块的key
                  mdKey: addModuleKey,
                  //排序追加项目专用数据指向
                  sortPath: '',

                }
              },
              created() {
                this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].contactCon
              }
            })
            Vue.component(addModuleKey, contact)
            this.mixArray.push(addModuleKey)
            console.log('添加联系我们模块')
            break;
          case 'mi_canshu':
            const canshu = Vue.extend({
              mixins: [itemsFuncMixin],
              props: ['TEMP_ROOT_DATA'],
              template: moduleString.miCanshu(),
              data() {
                return {
                  // 选择图片文件的id
                  choseimgfile: gethashcode(),
                  editable: true,
                  mdKey: addModuleKey,
                  dataPath: '',
                  //排序追加项目专用数据指向
                  sortPath: ''
                }
              },
              created() {
                this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].canshuCon
              }
            })
            Vue.component(addModuleKey, canshu)
            this.mixArray.push(addModuleKey)
            console.log('添加基本参数模块')
            break;
          case 'mi_care':
            const care = Vue.extend({
              mixins: [itemsFuncMixin],
              props: ['TEMP_ROOT_DATA'],
              template: moduleString.miCare(),
              data() {
                return {
                  // 选择图片文件的id
                  choseimgfile: gethashcode(),
                  editable: true,
                  mdKey: addModuleKey,
                  dataPath: '',
                  //排序追加项目专用数据指向
                  sortPath: ''
                }
              },
              created() {
                this.dataPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey]
                this.sortPath = this.TEMP_ROOT_DATA.tempCon.modules[this.mdKey].careCon
              }
            })
            Vue.component(addModuleKey, care)
            this.mixArray.push(addModuleKey)
            console.log('添加注意事项模块')
            break;
          default:
            break;
        }
      },
      // app 页fixed
      appFixedOrStatic(fs) {
        if (fs === 'fixed') {
          setTimeout(() => {
            document.getElementById('app').style.position = fs
          }, 300)
        } else if (fs === 'static') {
          document.getElementById('app').style.position = fs
        }
      },
      /**
       * 点击导航按钮事件
       * **/
      clickModuleIcon(e, i) {
        this.nowScrollTop = document.body.scrollTop || document.documentElement.scrollTop
        //如果是编辑状态下的点击
        if (this.GET_EDITABLE) {
          // 判断点击了添加模块按钮
          if (i === 'add_icon') {
            this.$refs.selModule.style.top = 0
            this.$refs.addTisMd.style.bottom = 0
            this.$refs.ediTingBtmBtns.style.height = 0
            this.appFixedOrStatic('fixed')
            console.log('点击了添加按钮')
            console.log(this.nowScrollTop)
            // 判断点击了排序按钮
          } else if (i === 'sort_icon') {
            this.$refs.sortModule.style.top = 0
            this.$refs.ediTingBtmBtns.style.height = 0
            this.appFixedOrStatic('fixed')
            console.log('点击了排序按钮')
          } else {
            //编辑状态下点击其它按钮逻辑
            console.log(i)
            this.wantChangeIcon = i
            this.$refs.selIconGroup.style.height = '3.5rem'
            this._initSelIconWrap()
          }
        } else {
          //如果在非编辑状态下的点击
        }

      },
      /**
       * 导航删除按钮事件
       * **/
      delThisModule(item, index) {
        if (this.TEMP_ROOT_DATA.tempCon.modulesSort.length !== 1) {
          this.$createDialog({
            type: 'confirm',
            // icon: 'cubeic-alert',
            title: '温馨提醒',
            content: '您确定要删除该模块吗？<br><br>删除后模块中的内容也会删除哦~~~',
            confirmBtn: {
              text: '确定',
              active: true,
              disabled: false,
              href: 'javascript:;'
            },
            cancelBtn: {
              text: '取消',
              active: false,
              disabled: false,
              href: 'javascript:;'
            },
            onConfirm: () => {
              // 删除本地数据中的某个模块
              this.$delete(this.TEMP_ROOT_DATA.tempCon.modules, index)
              // 删除存储模块顺序的某个模块
              for (let i = 0; i < this.TEMP_ROOT_DATA.tempCon.modulesSort.length; i++) {
                this.TEMP_ROOT_DATA.tempCon.modulesSort[i] === index ? this.TEMP_ROOT_DATA.tempCon.modulesSort.splice(i, 1) : ''
              }
              // 删除渲染模块的数组的某个模块
              for (let i = 0; i < this.mixArray.length; i++) {
                this.mixArray[i] === index ? this.mixArray.splice(i, 1) : ''
              }
              // 删除模块之后重新渲染，是否可编辑的状态重置
              this.$nextTick(() => {
                this.set_edit(false)
                setTimeout(() => {
                  this.set_edit(true)
                }, 50)
              })
              this.$createToast({
                type: 'loading',
                time: 1000,
              }).show()
            },
            onCancel: () => {

            }
          }).show()
        } else {
          this.$createDialog({
            type: 'alert',
            title: '温馨提醒',
            content: '至少有一个模块吧！'
          }).show()
        }
      },
      // 点击选中的图标
      clickSelIcon(item, index) {
        this.TEMP_ROOT_DATA.tempCon.modules[this.wantChangeIcon].icon.iconImg = item
        this.$refs.selIconGroup.style.height = '0'
      },
      //去编辑按钮
      goEdit() {
        this.set_edit(true)
        this.addAddAndSortBtn()
        if (document.getElementById('confirm')) {
          document.getElementById('confirm').style.bottom = '-1.173333rem'
        }
        if (document.getElementById('ediTingBtmBtns')) {
          document.getElementById('ediTingBtmBtns').style.bottom = '0'
        }
      },
      // 隐藏选择模块框
      hideAddModule() {
        this.$refs.selModule.style.top = '100%'
        this.$refs.addTisMd.style.bottom = '-1.2rem'
        this.$refs.ediTingBtmBtns.style.height = '1.173333rem'
        this.appFixedOrStatic('static')
      },
      // 预览操作
      temp_preview() {
        this.$nextTick(() => {
          this.set_edit(false)
          this.delAddAndSortBtn()
          this.$refs.confirm.style.bottom = '0'
          this.$refs.ediTingBtmBtns.style.bottom = '-1.173333rem'
          this.$refs.addTelBox.style.bottom = '-7.933333rem'
          this.banner.autoPlay = true
          this.AddBtmBtnBox('down')
        })
      },
      // 选中模块
      selThisMd(item, e, i) {
        this.selMdTips = i
        this.selMd = JSON.parse(JSON.stringify(item.icon.moduleName))
      },
      //去除增加和排序按钮
      delAddAndSortBtn() {
        setTimeout(() => {
          this.$delete(this.TEMP_ROOT_DATA.tempCon.modules, 'add_icon')
          this.$delete(this.TEMP_ROOT_DATA.tempCon.modules, 'sort_icon')
        }, 30)
      },
      //增加增加和排序按钮
      addAddAndSortBtn() {
        setTimeout(() => {
          this.$set(this.TEMP_ROOT_DATA.tempCon.modules, 'add_icon', this.add_icon)
          this.$set(this.TEMP_ROOT_DATA.tempCon.modules, 'sort_icon', this.sort_icon)
        }, 30)
      },
      // mixin中的组件名存进数组
      mixin2array() {
        this.$nextTick(() => {
          for (let i in this.OriginalModule) {
            this.mixArray.push(i)
          }
        })
      },
      //拖动排序函数
      getdata(evt) {
        console.log(evt.draggedContext.element)
      },
      // 拖动排序完毕执行函数
      datadragEnd: function (evt) {
        console.log('拖动前的索引 :' + evt.oldIndex)
        console.log('拖动后的索引 :' + evt.newIndex)
        // 拖动排序后的渲染顺序改变
        this.mixArray = JSON.parse(JSON.stringify(this.TEMP_ROOT_DATA.tempCon.modulesSort))

        // 更改json对象数据中模块key的顺序来改变导航中图标的顺序
        this.delAddAndSortBtn()
        let wantSortMd = JSON.parse(JSON.stringify(this.TEMP_ROOT_DATA.tempCon.modules))
        let toSortMd = JSON.parse(JSON.stringify(this.mixArray))
        let doneMd = []
        for (let i = 0; i < toSortMd.length; i++) {
          doneMd.push({[toSortMd[i]]: wantSortMd[toSortMd[i]]})
        }
        // 定义改变顺序后的模块数据
        let changeDoneMd = {}
        for (let i = 0; i < doneMd.length; i++) {
          changeDoneMd[[toSortMd[i]]] = wantSortMd[toSortMd[i]]
        }
        this.TEMP_ROOT_DATA.tempCon.modules = changeDoneMd

        // 重置editable状态
        setTimeout(() => {
          this.set_edit(false)
        }, 100)
        setTimeout(() => {
          this.set_edit(true)
        }, 200)
        this.addAddAndSortBtn()
        // 排序json数组中的顺序
        // console.log(this.list)
      },
      // 排序模块隐藏
      hideSortModule() {
        this.appFixedOrStatic('static')
        document.getElementById('ediTingBtmBtns').style.height = '1.173333rem'
        this.$refs.sortModule.style.top = '100%'
      },
      /**
       * banner start
       * **/
      // 滚动屏幕执行逻辑
      hScroll() {
        this.$nextTick(() => {
          const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          let nav = document.getElementById('navTopGroup')
          let hideNav = document.getElementById('hideNavTopGroup')
          let selIcon = this.$refs.selIconGroup
          let hideSelIcon = this.$refs.hideselIconGroup
          document.getElementById('selIconGroup').style.height = '0'
          // this.$refs.addTelBox.style.bottom = '-7.933333rem'
          if (scrollTop > this.GET_BANNER_HEIGHT) {
            hideNav.style.display = 'block'
            // hideSelIcon.style.display = 'block'
            nav.style.position = 'fixed'
            nav.style.top = '0'
            nav.style.zIndex = '9999999'
            selIcon.style.position = 'fixed'
            selIcon.style.top = '2.1333333rem'
          } else {
            hideNav.style.display = 'none'
            hideSelIcon.style.display = 'none'
            selIcon.style.position = 'static'
            nav.style.position = 'static'
            nav.style.top = '0'
            nav.style.zIndex = '9999999'
          }
        })
      },
      /**
       * 导航吸顶
       * **/
      /**
       * banner end
       * **/
      _initSelIconWrap() {
        let selscroll = new BScroll('.selIconGroup', {
          scrollX: true,
          click: true
        })
      },
      ...mapMutations({
        setTempData: 'SET_TEMP_DATA',
        set_up_or_down: 'SET_UPORDOWN',
        set_edit: 'SET_EDITABLE',
        set_preview: 'SET_IS_PREVIEW',
        set_banner_height: 'SET_BANNER_HEIGHT'
      })
    },
    updated() {
      const _that = this
      this.$nextTick(() => {
        if (this.$route.query.wxId || this.$route.query.lookMyInstrc) {
          if (this.$refs.confirm) {
            this.$refs.confirm.style.bottom = '-1.173333rem'
            this.$refs.userBtmBtnGroup.style.bottom = 0
          }
        }
        let textareas = document.querySelectorAll('textarea')
        $(textareas).on('focus', function () {
          for (let i = 0; i < textareas.length; i++) {
            autoTextarea(textareas[i])
          }
          document.getElementById('userBtmBtnGroup').style.opacity = '0'
          document.getElementById('ediTingBtmBtns').style.opacity = '0'
          _that.$refs.addActionBox.style.bottom = '-7.933333rem'
          _that.$refs.addTelBox.style.bottom = '-7.933333rem'
        })
        $(textareas).on('blur', function () {
          document.getElementById('userBtmBtnGroup').style.opacity = '1'
          document.getElementById('ediTingBtmBtns').style.opacity = '1'
        })
      })

    },
    computed: {
      //编辑状态线
      editTextOutLine() {
        if (this.editable) {
          return `border:.02rem dashed rgba(172,172,172,1);border-radius:3px`
        }
      },
      modulesListItemWidth() {
        const that = this
        return (function (w) {
          switch (w) {
            case 1:
              return `width:${that.nav.screenWidth}px`
              break;
            case 2:
              return `width:${that.nav.screenWidth / 2}px`
              break;
            case 3:
              return `width:${that.nav.screenWidth / 3}px`
              break;
            case 4:
              return `width:${that.nav.screenWidth / 4}px`
              break;
            default:
              return `width:${(that.nav.screenWidth / 4) - ((that.nav.screenWidth / 4) / 8)}px`
              break;
          }
        })(Object.keys(this.TEMP_ROOT_DATA.tempCon.modules).length)
      },
      modulesListWidth() {
        const that = this
        return (function (w) {
          switch (w) {
            case 2:
              return `width:100%`
              break;
            case 3:
              return `width:100%`
              break;
            case 4:
              return `width:100%`
            default:
              return `width:${((that.nav.screenWidth / 4) - ((that.nav.screenWidth / 4) / 8)) * w}px`
              break;
          }
        })(Object.keys(this.TEMP_ROOT_DATA.tempCon.modules).length)
      },
      selIconWrapWidth() {
        return `width:${(this.TEMP_ROOT_DATA.tempCon.selIconList.length * 1.6) / 2}rem`
      },
      ...mapGetters([
          'GET_TEMP_DATA',
          'GET_EDITABLE',
          'GET_UINFO',
          'GET_IS_PREVIEW',
          'GET_BANNER_HEIGHT',
          'GET_MODULE_ICON'
        ]
      ),
    },
    // beforeRouteLeave(to, from, next) {
    //   // const answer = window.confirm('确定要离开吗？')
    //   // if (answer) {
    //   //   next()
    //   // } else {
    //   //   next(false)
    //   // }
    // },
    components: {
      draggable,
      changeImgTips,
      myFooter2
    },
    activated() {
    },
    deactivated() {
    },
    beforeDestroy() {
      this.editable = false
      this.set_edit(false)
      window.removeEventListener("scroll", this.hScroll);
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  //关注我们模块框
  #followMe {
    width 100%
    height 100%
    -webkit-overflow-scrolling touch
    transform: translate3d(0, 0, 0);
    background $color-fff
    position fixed
    top 100%
    left 0
    transition all 0.3s
    overflow-y scroll
    z-index 9999999
    padding-bottom 360px
  }

  #followMe .followMeWrap {
    width 100%
    /*-webkit-overflow-scrolling touch*/
    overflow hidden
    position relative
  }

  #followMe .followMeWrap textarea {
    display block
    width 90%
    margin 10px auto
    font-size 16px
    padding 3px
    color $color-cyd
    text-align center
    height 18px
  }

  #followMe .followMeWrap .companyName {
    font-size 16px
    font-weight 400
    color #2E2E30
  }

  #followMe .followMeWrap .companyIntro {
    font-size 13px
    color #9B9B9B
  }

  #followMe .followMeWrap .contactTelphone {
    font-size 12px
    color #02C2A2
  }

  #followMe .followMeWrap .qrWrap {
    width 240px
    height 300px
    border 1px solid #E2E2E2
    margin 20px auto
  }

  #followMe .followMeWrap .qrWrap .qrWrapTop {
    width 180px
    height 180px
    margin 30px
    position relative
  }

  #followMe .followMeWrap .qrWrap .qrWrapBtm {
    border-top 1px solid #E2E2E2
    height 60px
    line-height 60px
    padding-top 10px
  }

  #followMe .followMeWrap .qrWrap .qrWrapBtm p {
    line-height 20px
    font-size 12px
    font-weight 300
    text-align center
    color #02C2A2
  }

  #followMe .followMeWrap .qrWrap .qrWrapTop img {
    width 100%
    height 100%
  }

  #followMe .followMeWrap .saveFollowMe {
    width 345px
    height 45px
    border-radius 3px
    font-size 14px
    background $color-cyd
    color $color-fff
    margin 10px auto
    display block

  }

  #followMe .followMeWrap .saveFollowMe:disabled {
    opacity 0.5
  }

  #followMe .followMeWrap textarea::-webkit-input-placeholder {
    color: #eee
  }

  #followMe .followMeWrap .followMeTitle {
    text-align center
    font-size 20px
    font-weight 300
    margin 20px auto
    position relative
  }

  #followMe .followMeWrap .followMeTitle i {
    position absolute
    font-size 18px
    right 15px
    top 5px
    display inline-block
    width 50px
    height 50px
  }

  //添加互动按钮框
  #addActionBox, #addTelBox {
    width 90%
    height 200px
    position fixed
    border-radius 4px
    bottom 92px
    bottom -200px
    background rgba(200, 200, 200, 0.9)
    transition all 0.3s
    left 0
    right 0
    margin auto
  }

  #addActionBox .title, #addTelBox .title {
    width 100%
    display block
    position relative
    text-align center
    font-size 16px
    font-weight 300
    line-height 40px
    margin-top 10px
  }

  #addActionBox .title .noSaveBtn, #addActionBox .title .saveBtn, #addTelBox .title .noSaveBtn, #addTelBox .title .saveBtn {
    float left
    margin-left 20px
    font-weight 300
    display inline-block
    width 60px
    height 26px
    line-height 26px
    margin-top 10px
    border-radius 3px
    font-size 14px
  }

  #addActionBox .title .saveBtn, #addTelBox .title .saveBtn {
    float right
    margin-left 0
    margin-right 20px
    background $color-cyd
    color $color-fff
    transition all 0.3s
  }

  #addActionBox .title .saveBtn:disabled, #addTelBox .title .saveBtn:disabled {
    opacity 0.6
  }

  #addActionBox .insertGroup, #addTelBox .insertGroup {
    width 100%
    text-align center
    margin-top 10px
  }

  #addActionBox .insertGroup input, #addTelBox .insertGroup input {
    width 90%
    height 40px
    margin 10px auto
    text-indent 1em
    border-radius 3px
    font-size 14px
    font-weight 300
    color $color-cyd
  }

  #addActionBox .insertGroup input::-webkit-input-placeholder, #addTelBox .insertGroup input::-webkit-input-placeholder {
    font-weight 300
    font-size 14px
    color #ccc
  }

  //用户底部按钮组
  #userBtmBtnGroup {
    width 100%
    height 48px
    background rgba(245, 245, 245, 0.9)
    position fixed
    bottom 44px
    transition all 0.3s
    display flex
    justify-content center
  }

  #userBtmBtnGroup .userBtmBtnGroupItems {
    flex 1
    text-align center
    line-height 48px
    font-size 0
    transition all 0.3s
  }

  #userBtmBtnGroup .userBtmBtnGroupItems .userBtmAddBtn {
    width 100px
    height 34px
    line-height 34px
    border 1px dashed #ccc
    font-size 12px
    margin 7px auto
    box-sizing border-box
    font-weight 300
    transition all 0.5s
  }

  //底部两个互动按钮
  #userBtmBtnGroup .userBtmBtnGroupItems .btmBtnLink {
    font-size 16px
    background linear-gradient(to bottom right, #FAD161, #F77F3B)
    transform scale(1)
    position relative
    transition all 0.3s
  }

  #userBtmBtnGroup .userBtmBtnGroupItems .btmBtnLink i {
    position absolute
    font-size 32px
    color red
    right -30px
    top -20px
    cursor pointer
    display inline-block
    width 50px
    height 50px
  }

  #userBtmBtnGroup .userBtmBtnGroupItems .scale {
    transform scale(0.6) !important
  }

  #userBtmBtnGroup .userBtmBtnGroupItems .RbtmBtnLink {
    background linear-gradient(to bottom right, #15D49F, #57D6CF)
  }

  #userBtmBtnGroup .userBtmBtnGroupItems .btmBtnLink a {
    font-weight 300
    color #fff
  }

  #userBtmBtnGroup .userBtmBtnGroupItems .leftBtns {
    font-size 12px
    width 50%
    height 48px
    text-align center
    display inline-block
    float left
  }

  #userBtmBtnGroup .userBtmBtnGroupItems .leftBtns .telIcon {
    line-height 18px
    margin-top 8px
  }

  #userBtmBtnGroup .userBtmBtnGroupItems .leftBtns h5 {
    line-height 20px
    font-size 12px
    font-weight 300
    transform scale(0.9)
    margin-top -3px
  }

  #userBtmBtnGroup .userBtmBtnGroupItems .leftBtns .telIcon i {
    font-size 16px
  }

  .tab-link {
    display: inline-block
    transition: all 0.3s
  }

  .temp_root {
    background #fff
    padding-bottom 90px
    z-index 10
  }

  .bannerImg {
    width 100%
    height 100%
  }

  .slider-wrapper
    position: relative
    width: 100%
    height: 0
    padding-top: 200px
    overflow: hidden
    .slider-content
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      .slider
        min-height: 1px
        height: 100%
        position: relative
        .slider-group
          position: relative
          overflow: hidden
          white-space: nowrap
          height: 100%
          .slider-item
            float: left
            height: 100%
            box-sizing: border-box
            overflow: hidden
            text-align: center
            position relative
            a
              display: block
              width: 100%
              height: 100%
              overflow: hidden
              text-decoration: none
              .bannerImg
                display: block
                width: 100%
                height 200px
        .dots
          position: absolute
          right: 0
          left: 0
          bottom: 12px
          transform: translateZ(1px)
          text-align: center
          font-size: 0
          .dot
            display: inline-block
            margin: 0 4px
            width: 8px
            height: 8px
            border-radius: 50%
            background: $color-text-l
            transition all 0.3s
            &.active
              width: 20px
              border-radius: 5px
              background: $color-text-ll

  //nav start
  .navTopWrapper {
    width 100%
    height 100%
  }

  .navTopWrapper li {
    height 100%
    text-align center
    float left
    color $color-5d
    transition all 0.5s
  }

  .navTopWrapper li textarea {
    font-size: $font-size-small;
    max-width: 5em
    display: inline-block
    padding: 1px
    text-align: center
    border-radius: 3px
    height: 16px
    font-weight: 300
    resize: none
  }

  .navTopWrapper li .noEdit {
    color #000
  }

  //.navTopWrapper li textarea:focus {
  //border: 1px dashed #ccc
  //border-radius 3px
  //}
  .tab-icon {
    width 40px
    height 40px
    line-height 40px
    border-radius 50%
    /*border 1px solid #ccc*/
    margin 10px auto 4px auto
    background $color-bd
    text-align center
    position relative
  }

  .tab-icon i {
    font-size 20px
    color $color-fff
  }

  .navTopGroup {
    width 100%
    height 80px
    /*display flex*/
    /*background #eee*/
    box-shadow: 0 0 10px #f0e7e7
    background rgba(255, 255, 255, 0.9)
    margin-bottom .5px
    overflow hidden
    z-index 999
  }

  //isSelIconStyle选中的图标状态
  .isSelIconStyle .tab-icon {
    background linear-gradient(to bottom right, #139c76, #57D6CF)
  }

  .isSelIconStyle textarea {
    -webkit-text-fill-color $color-cyd
  }

  .isSelIconStyle textarea:disabled {
    -webkit-text-fill-color $color-cyd
  }

  .selIconGroup {
    width 100%
    overflow hidden
    z-index 999
    height 0
    background rgba(245, 245, 245, 0.9)
    transition all 0.3s
  }

  .selIconGroupTitle {
    width 375px
    text-align center
    font-size 14px
    color $color-cyd
    font-weight 300
    margin-top -20px
  }

  .selIconWrap {
    /*width: 4000px;*/
  }

  .selIconWrap li {
    width: 56px
    height 56px
    line-height 56px
  }

  .selIconWrap li i {
    font-size: 28px
  }

  .nav-del-btn {
    width 16px
    height 16px
    border-radius 8px
    position absolute
    top -4px
    right -9px
    font-size 0
    /*transition all 0.3s*/
  }

  .nav-del-btn i {
    font-size 20px
    /*font-weight bolder*/
    position absolute
    color red
    top -12px
    right 1px
    z-index 10
    /*transition all 0.3s*/
  }

  .manageNavStyle
    li
      &:nth-last-child(1)
        .tab-icon
          background $color-fff
          border 1px dashed $color-9b
          .iconfont
            color $color-cyd
        textarea
          border none !important
        .nav-del-btn
          display none
      &:nth-last-child(2)
        .tab-icon
          background $color-fff
          border 1px dashed $color-9b
          .iconfont
            color $color-cyd
        textarea
          border none !important
        .nav-del-btn
          display none

  .hideNavTopGroup {
    display: none
    height 80px
  }

  .hideselIconGroup {
    height 3.5rem
    display none
  }

  //nav end
  //底部去编辑按钮
  .confirm
    width 100%
    height 44px
    background rgba(46, 46, 48, 0.8)
    position fixed
    //bottom -44px
    bottom 0
    line-height 44px
    text-align center
    color #fff
    font-size 14px
    font-weight 300
    transition all 0.5s
    z-index 999

  //编辑中的按钮
  .ediTingBtmBtns
    width 100%
    display flex
    height 44px
    background rgba(46, 46, 48, .8)
    position fixed
    bottom -44px
    transition all .3s
    justify-content center
    z-index 99999
    .ediTingBtmBtnsItems
      flex 1
      text-align center
      line-height 44px
      a
        display block
        color #fff
        font-size 16px
        font-weight 300
        line-height 44px
        cursor pointer
        i
          font-size 16px
    .goLine
      background linear-gradient(to right, rgba(21, 212, 159, 1), rgba(87, 214, 207, 1))

  //增加模块框
  .selModule
    width 100%
    height 100%
    overflow-y scroll
    position fixed
    top 100%
    left 0
    background rgb(255, 255, 255)
    transition all 0.5s
    -webkit-overflow-scrolling touch
    padding-bottom 44px
    z-index 11
    .selModuleWrap
      width 345px
      -webkit-overflow-scrolling touch
      margin 20px auto
      overflow hidden
      position relative
      .selModuleTitle
        text-align center
        font-size 16px
        color #2E2E30
        line-height 32px
        margin-bottom 20px
        position relative
        .iconfont
          font-size 20px
          font-weight 300
          position absolute
          right 0
          vertical-align middle

      .modulesCon
        display flex
        flex-wrap wrap
        justify-content space-around
        align-items flex-start
        align-content flex-start
        .modulesConItems
          /*flex 1 1 50%*/
          width 159px
          height 240px
          margin-bottom 10px
          text-align center
          overflow hidden
          border 1px solid #02C2A2
          border-radius 4px
          img
            width 100%
            height 100%
            transition all 0.3s
            border none
          .light
            border 4px solid #02C2A2
      .addTisMd
        position fixed
        bottom -45px
        width 100%
        left 0
        height 45px
        line-height 45px
        color #fff
        background #02C2A2
        border-radius 3px
        font-size 14px
        &:disabled
          opacity 0.5

  //排序模块框
  .sortModule
    width 100%
    height 100%
    overflow-y scroll
    position fixed
    top 100%
    left 0
    background rgb(255, 255, 255)
    transition all 0.5s
    -webkit-overflow-scrolling touch
    padding-bottom 44px
    z-index 10
    .sortModuleWrap
      width 345px
      -webkit-overflow-scrolling touch
      margin 20px auto
      overflow hidden
      position relative
      .sortModuleWrapTitle
        text-align center
        font-size 18px
        color #2E2E30
        line-height 32px
        margin-bottom 20px
        position relative
        .iconfont
          font-size 20px
          font-weight 300
          position absolute
          right 0
          vertical-align middle
      .dragging
        box-shadow 0 0 10px #ccc
      .sortStart
        border-top 2px solid #f5f5f5
        margin-top 16px
        .sortItem
          width 100%
          height 60px
          line-height 60px
          font-size 16px
          border-bottom 1px solid #f5f5f5
          padding-left 6px
          h2
            /*text-indent 1em*/
            font-weight 300
            i
              font-size 16px
              margin-right 8px
              font-weight 300
              float right
              transform rotate(90deg)
            a
              display inline-block
              min-width 20px
              height 20px
              line-height 20px
              text-align center
              font-size 12px
              border-radius 10px
              color $color-fff
              background $color-cyd
              vertical-align text-top

  //如何安装模块
  #moduleWrap
    .list-complete
      .list-complete-item
        .itemRoot
          .installRoot
            display flex
            flex-wrap wrap
            justify-content center
            align-items flex-start
            align-content flex-start
            .mi_install_thisItem
              flex 1 1 50%
              text-align center
              .item_num
                min-width 50px
                max-width 375px
                min-height 50px
                line-height 50px
                font-size 30px
                border-radius 25px
                color $color-fff
                display inline-block
                background $color-cyd
                margin-top 50px
              .item_title
                font-size $font-size-18
                color $color-34
                width 170px
                margin 25px auto 16px auto
                padding 3px
                text-align center
                height 24px
                line-height 24px
              .item_con
                font-size $font-size-14
                color $color-5d
                max-width 144px
                display inline-block
                text-align left
                line-height 20px
                padding 10px
              .itemConWrap_imgWrap
                margin 0 auto
              .item_img
                width 178px
                height 210px
                margin-top 25px
                img
                  width 100%
                  height 100%

  .isLikeWrap {
    text-align center
  }

  .isLikeWrap p {
    font-size 14px
    color #02C2A2
  }

  .isLikeWrap p i {
    font-size 16px
  }
</style>
